import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/cupertino.dart' hide Action;
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart' hide Action;
import 'package:www.znpigai.teacher/global_store/state.dart';
import 'package:www.znpigai.teacher/login_page/action.dart';
import 'package:fluwx/fluwx.dart' as fluwx;

import 'state.dart';

Widget buildView(LoginState state, Dispatch dispatch, ViewService viewService) {
  var border = OutlineInputBorder(
    borderSide: BorderSide(
      color: Colors.transparent,
    ),
  );

  var boxBorder = BoxDecoration(
    borderRadius: BorderRadius.all(
      Radius.circular(30), //边角为30
    ),
    border: Border.all(
      width: 1.0,
      color: Colors.grey,
    ),
  );

  const divider = SizedBox(
    height: 10.0,
  );

  var accountInput = Container(
    decoration: boxBorder,
    margin: EdgeInsets.only(bottom: 10),
    child: TextField(
      maxLines: 1,
      controller: state.accountController,
      decoration: InputDecoration(
        contentPadding: EdgeInsets.all(8),
        enabledBorder: border,
        focusedBorder: border,
        icon: SizedBox(
            width: 60,
            child: Text(
              state.mode != LoginMode.LOGIN ? '手机号' : '账号',
              textAlign: TextAlign.right,
            )),
        hintText: state.mode != LoginMode.LOGIN ? '请输入新手机号' : '请输入手机号或用户名',
      ),
    ),
  );

  var verifyCodeInput = Container(
    decoration: boxBorder,
    margin: EdgeInsets.only(bottom: 10),
    child: Row(
      children: <Widget>[
        Expanded(
          child: TextField(
              maxLines: 1,
              keyboardType: TextInputType.numberWithOptions(),
              decoration: InputDecoration(
                contentPadding: EdgeInsets.all(8),
                enabledBorder: border,
                focusedBorder: border,
                icon: SizedBox(
                    width: 60,
                    child: Text(
                      '验证码',
                      textAlign: TextAlign.right,
                    )),
                hintText: '验证码',
              ),
              onChanged: (input) =>
                  dispatch(LoginActionCreator.onInput({'code': input}))),
        ),
        SizedBox(
            height: 28,
            child: FlatButton(
              textColor: Colors.blue,
              child:
                  Text(state.counter > 0 ? '${state.counter}秒后重新发送' : '发送验证码',
                      style: TextStyle(
                        color: state.counter > 0 ? Colors.grey : Colors.blue,
                      )),
              onPressed: () {
                if (state.counter == 0) {
                  dispatch(LoginActionCreator.onVerifyCode());
                }
              },
            )),
      ],
    ),
  );

  var passwordInput = Container(
    decoration: boxBorder,
    margin: EdgeInsets.only(bottom: 10),
    child: TextField(
        maxLines: 1,
        obscureText: true,
        decoration: InputDecoration(
          contentPadding: EdgeInsets.all(8),
          enabledBorder: border,
          focusedBorder: border,
          icon: SizedBox(
              width: 60,
              child: Text(
                '密码',
                textAlign: TextAlign.right,
              )),
          hintText: '请输入密码',
        ),
        onChanged: (input) =>
            dispatch(LoginActionCreator.onInput({'password': input}))),
  );

  var nameInput = Container(
    decoration: boxBorder,
    margin: EdgeInsets.only(bottom: 10),
    child: TextField(
      maxLines: 1,
      controller: state.nameController,
      decoration: InputDecoration(
        contentPadding: EdgeInsets.all(8),
        enabledBorder: border,
        focusedBorder: border,
        icon: SizedBox(
            width: 60,
            child: Text(
              '姓名',
              textAlign: TextAlign.right,
            )),
        hintText: '请输入姓名',
      ),
    ),
  );

  var ganderSelect = Container(
    decoration: boxBorder,
    margin: EdgeInsets.only(bottom: 10),
    padding: EdgeInsets.fromLTRB(0, 6, 10, 6),
    child: Row(
      children: <Widget>[
        SizedBox(
            width: 60,
            child: Text(
              '性别',
              textAlign: TextAlign.right,
            )),
        SizedBox(width: 20),
        DropdownButton(
          underline: Text(''),
          isDense: true,
          hint: Text('性别'),
          value: state.ganderValue,
          items: [
            DropdownMenuItem(value: 'male', child: Text('男')),
            DropdownMenuItem(value: 'female', child: Text('女'))
          ],
          onChanged: (item) {
            dispatch(LoginActionCreator.selectGander(item));
          },
        ),
      ],
    ),
  );

  var otherButton = Row(
    children: <Widget>[
      FlatButton(
        child: Text("重置密码"),
        onPressed: () {
          dispatch(LoginActionCreator.onReset());
        },
      ),
      Spacer(),
      FlatButton(
        child: Text("立即注册"),
        onPressed: () {
          dispatch(LoginActionCreator.onRegister());
        },
      )
    ],
  );

  var tip = new RichText(
    text: new TextSpan(
        text: '登录注册表示同意',
        style: TextStyle(color: Colors.black),
        children: [
          TextSpan(
            text: '《用户协议》',
            style: TextStyle(color: Colors.blue),
            recognizer: new TapGestureRecognizer()
              ..onTap = () => dispatch(LoginActionCreator.onAgreement(2)),
          ),
          TextSpan(
            text: '和',
          ),
          TextSpan(
            text: '《隐私政策》',
            style: TextStyle(color: Colors.blue),
            recognizer: new TapGestureRecognizer()
              ..onTap = () => dispatch(LoginActionCreator.onAgreement(3)),
          ),
        ]),
  );

  var thirdLogin = Column(
    children: <Widget>[
      Text(
        "第三方登录",
        style: TextStyle(color: Colors.grey),
      ),
      IconButton(
        iconSize: 50,
        icon: Image.asset("assets/images/wx_third.png", fit: BoxFit.fill),
        onPressed: () {
          dispatch(LoginActionCreator.onWxLogin());
        },
      )
    ],
  );

  var confirmStr = '登录';
  switch (state.mode) {
    case LoginMode.REGISTER:
      confirmStr = '立即注册';
      break;
    case LoginMode.LOGIN:
      confirmStr = '登录';
      break;
    case LoginMode.RESET:
      confirmStr = '重置密码';
      break;
    case LoginMode.CHANGE_MOBILE:
      confirmStr = '确认更改';
      break;
  }

  var confirmButton = SizedBox(
    width: double.infinity,
    child: FlatButton(
      padding: EdgeInsets.all(12),
      color: Colors.blue,
      textColor: Colors.white,
      child: Text(confirmStr),
      shape: RoundedRectangleBorder(
          side: BorderSide(
            color: Colors.white,
            width: 0,
          ),
          borderRadius: BorderRadius.circular(20)),
      onPressed: () {
        dispatch(LoginActionCreator.onConfirm());
      },
    ),
  );

  var viewList = <Widget>[];
  var title = '';

  switch (state.mode) {
    case LoginMode.REGISTER:
      title = '注册';
      viewList = <Widget>[
        accountInput,
        verifyCodeInput,
        passwordInput,
        nameInput,
        // ganderSelect,
        confirmButton,
        divider,
        tip,
      ];
      break;
    case LoginMode.LOGIN:
      title = '登录';
      viewList = <Widget>[
        accountInput,
        passwordInput,
        confirmButton,
        otherButton,
        divider,
        tip,
        divider,
        divider,
      ];
      if (!GlobalState.isTeacher && GlobalState.wxInstalled && false) {
        viewList.add(thirdLogin);
      }
      break;
    case LoginMode.RESET:
      title = '重置密码';
      viewList = <Widget>[
        accountInput,
        verifyCodeInput,
        passwordInput,
        confirmButton,
      ];
      break;
    case LoginMode.CHANGE_MOBILE:
      title = '修改手机号';
      viewList = <Widget>[
        accountInput,
        verifyCodeInput,
        confirmButton,
      ];
      break;
  }

  return Scaffold(
      appBar: state.mode != LoginMode.LOGIN || GlobalState.isTeacher
          ? AppBar(centerTitle: true, title: Text(title))
          : null,
      body: SingleChildScrollView(
        child: Stack(
          children: <Widget>[
            Image.asset('assets/images/login_bg.png'),
            Column(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(
                      top:
                          state.mode != LoginMode.LOGIN || GlobalState.isTeacher
                              ? 10
                              : 40,
                      bottom: 10),
                  width: 80,
                  height: 80,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage("assets/images/ic_launcher.png"),
                      fit: BoxFit.cover,
                    ),
                    borderRadius: BorderRadius.all(
                      Radius.circular(16.0),
                    ),
                  ),
                ),
                Text(GlobalState.isTeacher ? "作文批改教师版" : '作文批改学生版',
                    style: TextStyle(fontSize: 14, color: Colors.white)),
                Card(
                    elevation: 4,
                    margin: EdgeInsets.fromLTRB(10, 4, 10, 10),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(16.0),
                    ),
                    child: Padding(
                      padding: EdgeInsets.all(20),
                      child: Column(children: viewList),
                    )),
              ],
            ),
          ],
        ),
      ));
}
